@charset "UTF-8";

%input-number-btn {
    position: absolute;
    top: 1px; right: $input-number-btn-wt + 2px;
    width: $input-number-btn-wt;
    height: calc(100% - 2px);

    text-align: center;
    font-size: 20px;
    color: $normal-black;
    border-left: 1px solid #adbdc7;
    user-select: none;

    &:hover {
        color: $blue;
    }

    &:before {
        @include absCenter();
    }
}

.#{$ns-comp}input-number {
    position: relative;
	display: inline-block;
	width: 100%;

	&:after {
		content: attr(data-unit);
		position: absolute;
		top: 50%;
		right: $input-number-btn-wt * 2 + $input-pd-lr;
		transform: translateY(-50%);
		color: $gray;
	}

	&.nocontrols {
		&:after{right: $input-pd-lr;}

		> .#{$ns-obj}input {
			padding-right: $input-pd-lr;
		}
	}

    > .#{$ns-obj}input {
        min-width: $input-number-btn-wt * 3 + $input-pd-lr;
        padding-right: ($input-number-btn-wt + 1) * 2 + 6px;

        &[disabled] + span,
        &[disabled] + span + span {
            color: $gray;
            background-color: $dark-white;
            border-color: lighten($gray, 10%);
            cursor: not-allowed;
        }
	}

    > .icon-plus {
        @extend %input-number-btn;
    }

    > .icon-minus {
        @extend %input-number-btn;
    }

    > .icon-plus:last-child,
    > .icon-minus:last-child {  // 最右侧的按钮
        right: 1px;
        border-radius: 0 $input-radius $input-radius 0;
    }
}
